<template>
  <div style="margin: 20px">
    <div class="mt-5" style="text-align: center" v-if="authUser">
      请在油企权限查看
    </div>
    <div class="label_batch" v-else>
      <div class="card card-body">
        <div class="container">
          <div class="row">
            <div class="col-sm col-md-4 offset-md-1">
              <div class="input-group input-group-sm flex-nowrap">
                <div class="input-group-prepend" style="width: 80px"></div>
                <div class="input-group-prepend">
                  <span class="input-group-text" id="addon-wrapping"
                    >油品：</span
                  >
                </div>
                <select
                  class="custom-select"
                  id="inputGroupSelect01"
                  style="width: 80px"
                  v-model="queryParams.oilName"
                >
                  <option :value="undefined" selected>全部</option>
                  <option
                    :value="ele.oilId"
                    v-for="ele in oilList"
                    :key="ele.oilId"
                  >
                    {{ ele.oilClass + "-" + ele.oilType + "-" + ele.oilName }}
                  </option>
                </select>
              </div>
            </div>
            <div class="col-sm col-md-5">
              <div class="input-group input-group-sm flex-nowrap">
                <div class="input-group-prepend" style="width: 80px"></div>
                <div class="input-group-prepend">
                  <span class="input-group-text" id="addon-wrapping"
                    >手机号：</span
                  >
                </div>
                <input
                  type="text"
                  class="form-control"
                  aria-label="Username"
                  aria-describedby="addon-wrapping"
                  v-model.number="queryParams.phone"
                />
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-sm col-md-4 offset-md-1">
              <div class="input-group input-group-sm flex-nowrap">
                <div class="input-group-prepend" style="width: 80px"></div>
                <div class="input-group-prepend">
                  <span class="input-group-text" id="addon-wrapping"
                    >渠道：</span
                  >
                </div>
                <el-select
                  multiple
                  collapse-tags
                  size="mini"
                  class="custom-select"
                  id="inputGroupSelect01"
                  style="width: 80px"
                  v-model="queryParams.labelIdList"
                  placeholder=""
                >
                  <!-- <el-option :value="undefined" label="全部" selected></el-option> -->
                  <el-option
                    :value="ele.id"
                    v-for="ele in labelList"
                    :key="ele.id"
                    :label="ele.labelName"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="col-sm col-md-5">
              <div class="input-group input-group-sm flex-nowrap">
                <div class="input-group-prepend" style="width: 80px"></div>
                <div class="input-group-prepend">
                  <span class="input-group-text" id="addon-wrapping"
                    >会员等级：</span
                  >
                </div>
                <el-select
                  multiple
                  collapse-tags
                  size="mini"
                  class="custom-select"
                  id="inputGroupSelect01"
                  style="width: 80px"
                  v-model="queryParams.gradeCodeList"
                  placeholder=""
                >
                  <el-option
                    :value="ele.gradeCode"
                    v-for="(ele, index) in gradeCodeList"
                    :key="index"
                    :label="ele.gradeName"
                  ></el-option
                ></el-select>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-sm col-md-9 offset-md-1">
              <div class="input-group input-group-sm flex-nowrap">
                <div class="input-group-prepend" style="width: 80px"></div>
                <div class="input-group-prepend">
                  <span class="input-group-text" id="addon-wrapping"
                    >日期：</span
                  >
                </div>
                <el-date-picker
                  v-model="searchParams.data"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  size="mini"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="max-width: 212px; height: 32px; border-radius: 0%"
                >
                </el-date-picker>
              </div>
            </div>
            <!-- <div class="col-sm col-md-5">
            <div class="input-group input-group-sm flex-nowrap">
              <div class="input-group-prepend" style="width: 80px"></div>
              <div class="input-group-prepend">
                <span class="input-group-text" id="addon-wrapping"
                  >最后消费：</span
                >
                <el-date-picker
                  v-model="searchParams.data"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  size="mini"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="max-width: 280px; height: 32px; border-radius: 0%"
                >
                </el-date-picker>
              </div>
            </div>
          </div> -->
          </div>

          <div class="row">
            <div class="col-sm col-md-9 offset-md-1">
              <div class="input-group input-group-sm flex-nowrap">
                <div class="input-group-prepend" style="width: 80px"></div>
                <div class="input-group-prepend">
                  <span class="input-group-text" id="addon-wrapping"
                    >加油频率：</span
                  >
                </div>
                <input
                  type="text"
                  class="form-control"
                  aria-label="Username"
                  aria-describedby="addon-wrapping"
                  v-model.number="queryParams.startCountNum"
                />
                <div class="input-group-prepend">
                  <span class="input-group-text" id="addon-wrapping">次</span>
                </div>
                <div class="input-group-prepend">
                  <span class="input-group-text" id="addon-wrapping">
                    ≤ 加油次数 &lt;
                  </span>
                </div>
                <input
                  type="text"
                  class="form-control"
                  aria-label="Username"
                  aria-describedby="addon-wrapping"
                  v-model.number="queryParams.endCountNum"
                />
                <div class="input-group-prepend">
                  <span class="input-group-text" id="addon-wrapping">次</span>
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-sm col-md-9 offset-md-1">
              <div class="input-group input-group-sm flex-nowrap">
                <div class="input-group-prepend" style="width: 80px">
                  <select
                    class="custom-select custom-select-sm"
                    id="inputGroupSelect01"
                    v-model="queryParams.amtFlag"
                  >
                    <option value="1">或者</option>
                    <option value="2">并且</option>
                  </select>
                </div>
                <div class="input-group-prepend">
                  <span class="input-group-text" id="addon-wrapping"
                    >加油金额：</span
                  >
                </div>
                <input
                  type="text"
                  class="form-control"
                  aria-label="Username"
                  aria-describedby="addon-wrapping"
                  v-model.number="queryParams.startAmt"
                />
                <div class="input-group-prepend">
                  <span class="input-group-text" id="addon-wrapping">元</span>
                </div>
                <div class="input-group-prepend">
                  <span class="input-group-text" id="addon-wrapping">
                    ≤ 加油金额 &lt;
                  </span>
                </div>
                <input
                  type="text"
                  class="form-control"
                  aria-label="Username"
                  aria-describedby="addon-wrapping"
                  v-model.number="queryParams.endAmt"
                />
                <div class="input-group-prepend">
                  <span class="input-group-text" id="addon-wrapping">元</span>
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-sm col-md-9 offset-md-1">
              <div class="input-group input-group-sm flex-nowrap">
                <div class="input-group-prepend" style="width: 80px">
                  <select
                    class="custom-select custom-select-sm"
                    id="inputGroupSelect01"
                    v-model="queryParams.litersFlag"
                  >
                    <option value="1">或者</option>
                    <option value="2">并且</option>
                  </select>
                </div>
                <div class="input-group-prepend">
                  <span class="input-group-text" id="addon-wrapping"
                    >数量：</span
                  >
                </div>
                <input
                  type="text"
                  class="form-control"
                  aria-label="Username"
                  aria-describedby="addon-wrapping"
                  v-model.number="queryParams.startLiters"
                />
                <div class="input-group-prepend">
                  <span class="input-group-text" id="addon-wrapping"
                    >(L/kg)</span
                  >
                </div>
                <div class="input-group-prepend">
                  <span class="input-group-text" id="addon-wrapping">
                    ≤ 数量 &lt;
                  </span>
                </div>
                <input
                  type="text"
                  class="form-control"
                  aria-label="Username"
                  aria-describedby="addon-wrapping"
                  v-model.number="queryParams.endLiters"
                />
                <div class="input-group-prepend">
                  <span class="input-group-text" id="addon-wrapping"
                    >(L/kg)</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-row class="global_el_rowStyle" :gutter="10">
        <el-col :span="1.5">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-download"
            @click="handleExport"
            >导出</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" size="small" @click="resetQuery"
            >重置
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            @click="getList"
            >立刻查询</el-button
          >
        </el-col>
        <el-col :span="1.5" v-if="$store.state.user.userLevel == 1">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-setting"
            @click="handleSendSetting"
            >推送设置</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            size="small"
            @click="openSendMessage('batch')"
            >批量推送</el-button
          >
        </el-col>
      </el-row>
      <el-table
        :data="userList"
        @selection-change="selectionChange"
        class="mt-5"
        stripe
      >
        <af-table-column align="left" prop="id" type="selection" />
        <af-table-column label="姓名" align="left" prop="customerName" />

        <af-table-column label="手机号" align="left" prop="phone" />
        <af-table-column
          label="最后一笔消费时间"
          align="left"
          prop="createDate"
        />
        <af-table-column
          label="近期详细消费"
          align="left"
          prop="stationName"
          width="160px"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-search"
              class="underline btn24"
              size="mini"
              @click="getConsume(scope.row)"
              >查询</el-button
            >
          </template>
        </af-table-column>
        <af-table-column label="操作" align="left" width="160px" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-circle-plus-outline"
              class="underline btn24"
              size="mini"
              slot="reference"
              @click="openSendMessage('user', scope.row)"
              >推送消息</el-button
            >
          </template>
        </af-table-column>
      </el-table>
      <pagination
        style="margin-bottom: 40px"
        v-show="total > 1"
        :total="total"
        :pageSizes="[10, 50, 100, 200]"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <el-dialog
        title="近日订单"
        :visible.sync="orderDialog"
        width="750px"
        append-to-body
      >
        <div class="app-container">
          <el-table :data="orderList">
            <!-- <af-table-column label="油站" align="left" prop="stationName" /> -->
            <af-table-column label="订单号" align="left" prop="orderNo" />
            <af-table-column label="油品名称" align="left" prop="oilName" />
            <af-table-column
              label="油品价格(元)"
              align="left"
              prop="oilPirce"
            />
            <af-table-column
              label="数量(L/kg)"
              align="left"
              prop="orderLiters"
            />
            <af-table-column label="实付金额(元)" align="left" prop="amt" />
            <!-- <af-table-column label="加油枪号" align="left" prop="oilGun" /> -->
            <af-table-column
              label="支付完成时间"
              align="left"
              prop="payDate"
              width="160px"
            >
              <template slot-scope="scope">
                <span>{{
                  parseTime(scope.row.payDate, "{y}-{m}-{d} {h}:{i}:{s}")
                }}</span>
              </template>
            </af-table-column>
          </el-table>
          <pagination
            v-show="orderList.length > 0"
            :total="orderTotal"
            :page.sync="orderQuery.pageNum"
            :limit.sync="orderQuery.pageSize"
            @pagination="getOrderList"
          />
        </div>
      </el-dialog>
      <el-dialog
        title="推送消息"
        :visible.sync="messageOpenDialog"
        width="750px"
        @close="messageOpenDialogClose"
        append-to-body
      >
        <el-form :model="messageForm" ref="messageForm" :rules="messageRules">
          <el-form-item label="" prop="title">
            <el-input
              v-model="messageForm.title"
              type="textarea"
              placeholder="请输入需推送内容标题(1-20字)"
              :autosize="{ minRows: 1, maxRows: 2 }"
              :style="{ width: '100%' }"
              maxlength="20"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="" prop="message">
            <el-input
              v-model="messageForm.message"
              type="textarea"
              placeholder="请输入需推送内容(1-20字)"
              :autosize="{ minRows: 4, maxRows: 4 }"
              :style="{ width: '100%' }"
              maxlength="20"
            >
            </el-input>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            @click="handleSubmitMessage"
            size="small"
            :loading="sendLoading"
            :disabled="sendLoading"
            >确 定 发 送</el-button
          >
          <el-button
            @click="cancelSubmitMessage"
            :disabled="sendLoading"
            size="small"
            >取 消</el-button
          >
        </div>
      </el-dialog>
      <el-drawer
        title="推送设置"
        :before-close="closeSendSetting"
        :visible.sync="sendSettingDialog"
        direction="rtl"
      >
        <div class="set_content">
          <el-form
            :model="sendSettingForm"
            ref="sendSettingRef"
            :rules="sendSettingRules"
          >
            <el-form-item>
              <div>
                优惠券到期推送
                <el-switch
                  v-model="sendSettingForm.couponSwitch"
                  class="set_switch"
                  active-value="NO"
                  inactive-value="OFF"
                  @change="changeSwitch"
                ></el-switch>
                <el-time-select
                :disabled="sendSettingForm.couponSwitch === 'OFF'"
                  class="set_switch"
                  size="mini"
                  v-model="sendSettingForm.pushTime"
                  :picker-options="{
                    start: '08:00',
                    step: '01:00',
                    end: '20:00'
                  }"
                  placeholder="请选择优惠券到期推送时间"
                >
                </el-time-select>
              </div>
            </el-form-item>
            <el-form-item>
              <el-radio-group v-model="sendSettingForm.rule">
                <el-radio :label="1"> 到期24小时前推送</el-radio>
                <el-radio :label="2"> 到期3天前推送</el-radio>
                <el-radio :label="3"> 到期7天前推送</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div class="set__footer">
            <el-button @click="closeSendSetting">取 消</el-button>
            <el-button
              type="primary"
              @click="submitSendSetting"
              :loading="sendSettingLoading"
              >确 定</el-button
            >
          </div>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import {
  getLabelUser,
  getLabelList,
  delUserLabel,
  addAndDelCustomerLabel,
  getConsume,
  getOilNameList,
  selectCustomerLabelInfoListExport,
} from "@/api/label/label";

import { getOilListByLogin } from "@/api/dept";
import {
  sendMessageToUser,
  sendMessageToUserBatch,
  selectCouponPushMessageRule,
  addOrUpdateCouponPushMessageRule,
} from "@/api/customer/manage";
import { getGrade } from "@/api/grade";
import { cloneDeep } from "lodash";
export default {
  name: "Message_Choose",
  data() {
    let validateMsg = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入推送的消息"));
        return;
      }
      callback();
    };
    return {
      sendSettingForm: {
        couponSwitch: "OFF",
        pushTime: "",
        rule:null
      },
      sendSettingRules: {},
      sendSettingLoading: false,
      sendSettingDialog: false,
      sendType: "user",
      sendLoading: false,
      messageRules: {
        msg: [{ validator: validateMsg, trigger: "change" }],
      },
      messageOpenDialog: false,
      // 总条数
      total: 0,
      // 客户电子会员卡充值消费记录表格数据
      userList: [],
      searchParams: {
        data: null,
        secondDate: null,
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,

        oilName: null,
        labelIdList: [],
        gradeCodeList: [],
        beginDate: null,
        endDate: null,

        startCountNum: null,
        endCountNum: null,

        amtFlag: "1",
        startAmt: null,
        endAmt: null,

        litersFlag: "1",
        startLiters: null,
        endLiters: null,

        secondFlag: 1,
        secondBeginDate: null,
        secondEndDate: null,

        secondStartCountNum: null,
        secondEndCountNum: null,

        secondAmtFlag: "1",
        secondStartAmt: null,
        secondEndAmt: null,

        secondLitersFlag: "1",
        secondStartLiters: null,
        secondEndLiters: null,
        cardCodeFalg: "1",
        phone: null,
      },
      orderList: [{}],
      orderOpen: false,
      totalInfo: 0,
      query: {
        pageNum: 1,
        pageSize: 10,
        unionId: null,
        customerName: null,
        recordType: null,
        integral: null,
        stationId: null,
        stationName: null,
        levelId: this.levelId,
      },
      dateRangeCreatedDate: [],
      selectedUser: [],
      checkedUser: [],
      toLabeledDialog: false,
      labelList: [],
      gradeCodeList: [],
      oilList: [],
      currentLabelId: undefined,
      orderDialog: false,
      orderTotal: 0,
      orderQuery: {
        pageNum: 1,
        pageSize: 10,
        customerPhone: undefined,
      },
      showQuery: false,
      messageForm: {
        message: "",
        title: "",
        codeList: [],
        openIdList: [],
      },
    };
  },
  computed: {
    authUser() {
      let roles = this.$store.state.user.roles;
      if (roles.includes("admin")) {
        return true;
      } else {
        return false;
      }
    },
  },
  created() {
    if (!this.authUser) {
      this.getList();
      this.getLabel();
      this.getGrade();
      getOilListByLogin()
        .then((res) => {
          if (res.code == 200) {
            this.oilList = res.rows;
          } else {
            throw new Error("");
          }
        })
        .catch(() => {
          this.msgError("拉取油品列表失败，请刷新网页~");
        });
    }
  },
  methods: {
    changeSwitch(e) {
      this.sendSettingForm.rule =  e === "NO" ?  1: null
      this.sendSettingForm.pushTime = e === "NO" ? this.sendSettingForm.pushTime : ""
    },
    // 推送设置
    async handleSendSetting() {
      this.sendSettingDialog = true;
      this.sendSettingForm = (await selectCouponPushMessageRule()).data || this.sendSettingForm
    },
    // 关闭推送设置
    closeSendSetting() {
      this.sendSettingDialog = false;
      this.$refs.sendSettingRef.resetFields();
    },
    // 提交推送设置
    async submitSendSetting() {
      this.sendSettingLoading = true;
      try {
        const res = await addOrUpdateCouponPushMessageRule(this.sendSettingForm)
        this.$message.success(res.msg)
      } catch (error) {
        console.log(error);
      }finally{
        this.sendSettingLoading = false;
        this.sendSettingDialog = false
      }

    },
    // 渠道下拉列表
    async getLabel() {
      const res = await getLabelList();
      this.labelList = res.rows;
    },
    // 会员等级下拉列表
    async getGrade() {
      const res = await getGrade();
      this.gradeCodeList = res.rows;
    },
    messageOpenDialogClose() {
      this.selectedUser = [];
      this.$refs["messageForm"].resetFields();
    },
    openSendMessage(type, row) {
      if (this.selectedUser.length == 0) {
        this.selectedUser = [row];
      }
      this.sendType = type;
      this.messageOpenDialog = true;
    },
    getConsume(row) {
      this.orderQuery.customerPhone = row.phone;
      this.getOrderList();
    },
    getOrderList() {
      getConsume(this.orderQuery)
        .then((res) => {
          if (res.code == 200) {
            this.orderList = res.rows;
            this.orderTotal = res.total;
            this.orderDialog = true;
          } else {
            throw new Error("");
          }
        })
        .catch(() => {
          this.msgError("查询近日订单~");
        });
    },
    toLabeledDialogClose() {
      this.selectedUser = [];
      this.checkedUser = [];
    },
    // 推送消息确认
    async handleSubmitMessage() {
      await this.$refs["messageForm"].validate();
      const codeList = [];
      const openIdList = [];
      this.sendLoading = true;

      try {
        // 区分单个推送和批量推送
        // 如果没有选择内容直接点击 批量推送就调第二个接口
        if (
          this.sendType === "user" ||
          (this.selectedUser.length > 0 &&
            !this.selectedUser.includes(undefined))
        ) {
          this.selectedUser.map((ele) => {
            codeList.push(ele.cardCode);
            openIdList.push(ele.blogOpenid);
          });
          this.messageForm.codeList = codeList;
          this.messageForm.openIdList = openIdList;
          const res = await sendMessageToUser(this.messageForm);
          this.msgSuccess("操作成功");
        } else {
          // 参数是查询参数 和 推送内容
          // 处理 this.queryParams.labelId
          let params = cloneDeep(this.queryParams);
          params.labelIdList = this.queryParams.labelIdList.join(",");
          params.gradeCodeList = this.queryParams.gradeCodeList.join(",");
          const res = await sendMessageToUserBatch({
            ...params,
            message: this.messageForm.message,
            title: this.messageForm.title,
          });
          this.msgSuccess("操作成功");
        }
      } finally {
        this.sendLoading = false;
        this.messageOpenDialog = false;
        this.getList();
      }
    },
    cancelSubmitMessage() {
      this.messageOpenDialog = false;
    },
    handleSubmitLable() {
      const addArr = [];
      this.selectedUser.map((ele) => {
        if (ele.labelId != this.currentLabelId && !ele.labelId)
          addArr.push(ele.phone);
      });
      addAndDelCustomerLabel({
        labelId: this.currentLabelId,
        flag: "0",
        phoneList: addArr,
      })
        .then((res) => {
          if (res.code == 200) {
            this.getList();
            this.msgSuccess("批量拉入标签成功~");
            this.toLabeledDialog = false;
          } else {
            throw new Error("");
          }
        })
        .catch(() => {
          this.msgError("批量拉入标签失败，请刷新网页后重试~");
          this.toLabeledDialog = false;
        });
    },
    cancelSubmitLabel() {
      this.getList();
      this.toLabeledDialog = false;
    },
    translationLabel(id) {
      const label = this.labelList.find((ele) => {
        return id == ele.id;
      });
      if (label == undefined) {
        return "";
      }
      return label.labelName;
    },
    toUnLableed(row) {
      const delArr = [];
      if (this.selectedUser.length == 0) {
        delArr.push(row.phone);
      } else {
        this.selectedUser.map((ele) => {
          if (!!ele.phone) {
            delArr.push(ele.phone);
          }
        });
      }

      delUserLabel({ phoneList: delArr })
        .then((res) => {
          if (res.code == 200) {
            this.getList();
            this.msgSuccess("删除用户标签成功~");
          } else {
            throw new Error("");
          }
        })
        .catch(() => {
          this.msgError("删除用户标签状态失败，请刷新后重试~");
        });
    },
    toClearLabel(row) {
      const delArr = [];
      if (this.checkedUser.length == 0) {
        this.checkedUser = [row];
        delArr.push(row.phone);
      } else {
        this.checkedUser.map((ele) => {
          delArr.push(ele.phone);
        });
      }

      delUserLabel({ phoneList: delArr })
        .then((res) => {
          if (res.code == 200) {
            this.checkedUser.map((ele) => {
              if (delArr.includes(ele.phone)) {
                ele.labelId = null;
                ele.labelName = null;
              }
            });
            this.msgSuccess("删除用户标签成功~");
          } else {
            throw new Error("");
          }
        })
        .catch(() => {
          this.msgError("删除用户标签状态失败，请刷新后重试~");
        });
    },
    selectionChange(selection) {
      this.checkedUser = [];
      console.log(selection);
      this.selectedUser = selection;
    },
    checkChange(selection) {
      this.checkedUser = selection;
    },
    usageTypeFotmat(row, column) {
      if (row.usageType === "+") {
        return "充值";
      } else if (row.usageType === "-") {
        return "消费";
      }
    },
    cardOilsTypeFotmat(row, column) {
      if (row.cardOilsType === "1") {
        return "汽油";
      } else if (row.cardOilsType === "2") {
        return "柴油";
      } else if (row.cardOilsType === "3") {
        return "非油品";
      } else if (row.cardOilsType === "4") {
        return "LNG";
      } else if (row.cardOilsType === "5") {
        return "CNG";
      }
    },
    /** 查询客户电子会员卡充值消费记录列表 */
    getList() {
      // 处理 this.searchParams.data
      this.queryParams.beginDate =
        this.searchParams.data === null ? null : this.searchParams.data[0];
      this.queryParams.endDate =
        this.searchParams.data === null ? null : this.searchParams.data[1];

      // 处理 this.searchParams.secondDate
      this.queryParams.secondBeginDate =
        this.searchParams.secondDate === null
          ? null
          : this.searchParams.secondDate[0];
      this.queryParams.secondEndDate =
        this.searchParams.secondDate === null
          ? null
          : this.searchParams.secondDate[1];

      // 处理 this.queryParams.labelId
      let params = cloneDeep(this.queryParams);
      if (
        this.queryParams.labelIdList &&
        this.queryParams.labelIdList.length > 0
      ) {
        params.labelIdList = this.queryParams.labelIdList.join(",");
      }
      if (
        this.queryParams.gradeCodeList &&
        this.queryParams.gradeCodeList.length > 0
      ) {
        params.gradeCodeList = this.queryParams.gradeCodeList.join(",");
      }
      getLabelUser(params).then((response) => {
        this.userList = response.rows;
        this.total = response.total;
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      console.log(this.queryParams);
      if (this.searchParams.data === null) {
        this.queryParams.beginDate = null;
        this.queryParams.endDate = null;
      } else {
        this.queryParams.beginDate = this.searchParams.data[0];
        this.queryParams.endDate = this.searchParams.data[1];
      }
      if (this.searchParams.secondDate === null) {
        this.queryParams.secondBeginDate = null;
        this.queryParams.secondEndDate = null;
      } else {
        this.queryParams.secondBeginDate = this.searchParams.secondDate[0];
        this.queryParams.secondEndDate = this.searchParams.secondDate[1];
      }
      let params = cloneDeep(this.queryParams);
      if (
        this.queryParams.labelIdList &&
        this.queryParams.labelIdList.length > 0
      ) {
        params.labelIdList = this.queryParams.labelIdList.join(",");
      }
      if (
        this.queryParams.gradeCodeList &&
        this.queryParams.gradeCodeList.length > 0
      ) {
        params.gradeCodeList = this.queryParams.gradeCodeList.join(",");
      }
      selectCustomerLabelInfoListExport(params).then((response) => {
        this.download(response.msg);
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        oilName: null,
        labelIdList: [],
        gradeCodeList: [],
        beginDate: null,
        endDate: null,
        startCountNum: null,
        endCountNum: null,
        amtFlag: "1",
        startAmt: null,
        endAmt: null,
        litersFlag: "1",
        startLiters: null,
        endLiters: null,
        secondFlag: 1,
        secondBeginDate: null,
        secondEndDate: null,
        secondStartCountNum: null,
        secondEndCountNum: null,
        secondAmtFlag: "1",
        secondStartAmt: null,
        secondEndAmt: null,
        secondLitersFlag: "1",
        secondStartLiters: null,
        secondEndLiters: null,
        cardCodeFalg: "1",
        phone: null,
      };
      this.searchParams.data = null;
      this.handleQuery();
    },
    orderOpenMethod() {
      this.orderOpen = true;
    },
    toLabeled(idAndPhone) {
      const idAndPhoneArr = idAndPhone.match(/\d{1,}/g);
      const id = idAndPhoneArr[0];
      const phone = idAndPhoneArr[1];

      if (!id || !phone) {
        this.msgError("打标签失败，刷新重试~");
        return;
      }

      if (this.selectedUser.length == 0) {
        const user = this.userList.find((ele) => {
          return ele.phone == phone;
        });
        if (user === undefined) {
          this.msgError("打标签失败，刷新重试~");
          return;
        }
        this.selectedUser = [user];
      }
      this.currentLabelId = id;
      this.toLabeledDialog = true;
    },
    toggleQuery() {
      if (this.queryParams.secondFlag == 0) {
        this.queryParams.secondFlag = 1;
      } else {
        this.queryParams.secondFlag = 0;
      }
    },
    bytesLength(str) {
      var count = str.length;
      for (var i = 0; i < str.length; i++) {
        if (str.charCodeAt(i) > 255) {
          count++;
        }
      }
      return count;
    },
  },
};
</script>
<style scoped lang="scss">
.set_content {
  padding: 0 2rem;
  .set_switch {
    margin-left: 1rem;
  }
}
.set__footer {
  margin-top: 10rem;
  text-align: right;
}
.col-button {
  margin-top: 40px;
}
.label_batch {
  .container {
    .row {
      margin-bottom: 10px;
    }
  }
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
::v-deep .el-select .el-input__inner {
  height: 1rem;
  border: none;
}
::v-deep .el-icon-arrow-up:before {
  content: "";
}
</style>
